<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app{
            display: flex;
            flex-direction: column;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        .menu-list{
            list-style: none;
            padding: 0;
            margin: 0;
            width: 100%;
            height: 40px;
            display: flex;
            justify-content: space-between;
            line-height: 40px;
            font-size: 16px;
            color: #333;
        }
        .menu-list li{
            flex: 1;
            text-align: center;
            line-height: 40px;
        }

        .menu-list li a {
            text-decoration: none;
            color: #333;
        }

        .menu-list li.active {
            background: rgb(237, 320, 215);
        }
        .menu-list li.active a{
            color: red;
        }
        .content{
            flex: 1;
        }
        .goods-container{
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 100%;
        }
        .goods-container .container-menu{
            width: 120px;
            height: 100%;
            background: #ddd;
            border: 1px solid #ddd;
            box-sizing: border-box;
        }
        .goods-container .container-menu .menu-item {
            width: 120px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background-color: #fff;
        }
        .goods-container .container-menu .menu-item.active{
            background: #ddd;
        }
        .goods-container .container-detail{
            flex: 1;
        }
        .footer{
            width: 100%;
            height: 40px;
            background: rgb(25, 35, 43);
            text-align: center;
            line-height: 40px;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 点击菜单栏按钮，跳转到相对应的路由组件 -->
        <ul class="menu-list">
            <li :class="{active:$route.path === '/goods'}">
                <router-link to="/goods">商品</router-link>
            </li>
            <li :class="{active:$route.path === '/evaluate'}">
                <router-link to="/evaluate">评价</router-link>
            </li>
            <li :class="{active:$route.path === '/shangjia'}">
                <router-link to="/shangjia">商家</router-link>
            </li>
        </ul>
        <!-- 路由渲染器 -->
        <div class="content">
            <router-view></router-view>
        </div>

        <div class="footer">
            共&yen;202
        </div>
    </div>

    <script src="js/data.js"></script>
    <script src="js/vue.js"></script>

    <!-- 路由 -->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

    <script>
        //console.log(data)
        //路由传参
        let comGoods = {
            template:`
                <div class="goods-container">
                    <div class="container-menu">
                        <div v-for="(item,index) in menuData" @click="getChildren(item)" class="menu-item">{{item.title}}</div>
                    </div>

                    <div class="container-detail">
                        <router-view></router-view>
                    </div>
                </div>
            `,
            data(){
                return {
                    //menuData:[],
                    menuChildren:[]
                }
            },
            methods:{
                getChildren(item){
                    console.log(item)
                    //this.menuChildren = item.children
                    this.$router.push({
                        path:item.path
                    })
                }
            },
            //mounted(){
            //  this.menuData = data
            // },
            computed:{
                menuData(){
                    return data
                }
            }
        }

        let comEvaluate = {
            template :`<div>这是评价界面</div>`
        }
        let comShangjia = {
            template :`<div>这是商家界面</div>`
        }
        let single = {
            template :`<div>这是单人精彩套餐组件界面</div>`
        }
        let hot = {
            template :`<div>这是果汁果拼组件界面</div>`
        }
        let fruits = {
            template :`<div>这是精选热菜组件界面</div>`
        }
        let food = {
            template :`<div>这是小吃主食界面</div>`
        }
        
        //创建路由实例
        let router = new VueRouter({
            //路由列表
            routes:[
                {
                    path:'/goods',
                    component:comGoods,
                    children:[
                        {path:'/goods/single',component:single},
                        {path:'/goods/hot',component:hot},
                        {path:'/goods/fruits',component:fruits},
                        {path:'/goods/food',component:food},
                    ]
                },
                {path:'/evaluate',component:comEvaluate},
                {path:'/shangjia',component:comShangjia},

            ]
        })

        let myApp = new Vue({
            el:'#app',
            router,
            data:{

            },
            methods:{
                toPath(){
                    console.log(this.$route)
                }
            }
            
        })
    </script>
</body>
</html>